{% extends 'frame/base.html' %}
{% load staticfiles %}
{% block title_block %}
    配置新建
{% endblock %}
{% block mystyle_css %}
    <style type="text/css">
    .todo-list > li p {
    width: 100%;
    padding: 15px 20px 10px 35px;
    }
    </style>
{% endblock %}
{% block body_block %}
<div class="main">
    <!-- MAIN CONTENT -->
    <div class="main-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            <span class="ion-md-flag" id="title">配置新建</span>
                        </div>
                        <hr style="FILTER: alpha(opacity=100,finishopacity=0,style=3);margin-top: 0px;" width="100%" color=#987cb9 SIZE=3>

                        <div class="custom-tabs-line tabs-line-bottom left-aligned">
                            <ul class="nav" role="tablist" >
                                <li class="active"><a href="#tab-bottom-left1" role="tab" data-toggle="tab">配置信息</a></li>
                                <li ><a href="#tab-bottom-left2" role="tab" data-toggle="tab">变量/参数/hooks</a></li>
                                <li ><a href="#tab-bottom-left3" role="tab" data-toggle="tab">request</a></li>
                                <li ><a href="#tab-bottom-left4" role="tab" data-toggle="tab">extract/validate</a></li>
                            </ul>
                        </div>
                         <br>
                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="tab-bottom-left1" style="padding-left: 8px;">             
                                <br>
                                <form class="form-horizontal" id="case_create">
                                    <div class="form-group  has-feedback">
                                        <label class="control-label col-md-2 text-primary" for="config_name">配置名称：</label>
                                         <div class="col-md-5">
                                            <input type="text" class="form-control" id="config_name" aria-describedby="inputSuccess3Status" name="config_name" placeholder="请输入配置名称" value="">
                                            <span class="glyphicon glyphicon-th-large form-control-feedback" aria-hidden="true"></span>
                                        </div>
                                    </div>

                                     <div class="form-group  has-feedback">
                                        <label class="control-label col-md-2 text-primary" for="project_name">所属项目：</label>
                                        <div class="col-md-5">
                                        <select name="project_name" class="form-control" id="project_name">
                                            <option value="-1">请选择</option>
                                        </select>
                                        </div>
                                    </div>

                                    <div class="form-group  has-feedback">
                                        <label class="control-label col-md-2 text-primary" for="module_name">所属模块：</label>
                                        <div class="col-md-5">
                                        <select name="module_name" class="form-control" id="module_name">
                                            <option value="-1">请选择</option>
                                        </select>
                                        </div>
                                    </div>

                                    <div class="form-group  has-feedback">
                                        <label class="control-label col-md-2 text-primary" for="creator">编写人员：</label>
                                         <div class="col-md-5">
                                            <input type="text" class="form-control" id="creator" aria-describedby="inputSuccess3Status" name="creator" placeholder="请输入编写人员名称" value="{{request.user.username}}">
                                            <span class="glyphicon glyphicon-th-large form-control-feedback" aria-hidden="true"></span>
                                        </div>
                                    </div>
                                </form>
                            </div>

                                <div class="tab-pane fade" id="tab-bottom-left2" style="padding-left: 8px;">
                                            <br>
                                    <button class="btn btn-info" value="添 加" onclick="add_row('variables')">+ variables</button>
                                    <button class="btn btn-danger" value="删 除" onclick="del_row('variables')">- variables</button>
                                    <button class="btn btn-info" value="添 加" onclick="add_params('params')">+ param</button>
                                    <button class="btn btn-danger" value="删 除" onclick="del_row('params')">- param</button>
                                    <button class="btn btn-info" value="添 加" onclick="add_row('hooks')">+ hooks</button>
                                    <button class="btn btn-danger" value="删 除" onclick="del_row('hooks')">- hooks</button>

                                    <form id="form_variables">
                                        <table class="table table-hover table-condensed table-bordered table-striped" id="variables">
                                            <caption>变量:</caption>
                                            <thead>
                                            <tr class="active text-success">
                                                <th width="5%" align="center">操作</th>
                                                <th width="30%" align="center">Key</th>
                                                <th width="10%" align="center">Type</th>
                                                <th width="55%" align="center">Value</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </form>

                                    <form id="form_params">
                                        <table class="table table-hover table-condensed table-bordered table-striped" id="params">
                                            <caption>参数:</caption>
                                            <thead>
                                            <tr class="active text-success">
                                                <th width="5%" align="center">操作</th>
                                                <th width="20%" align="center">Key</th>
                                                <th width="75%" align="center">Value</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </form>

                                    <form id="form_hooks">
                                        <table class="table table-hover table-condensed table-bordered table-striped" id="hooks">
                                            <caption>hooks:</caption>
                                            <thead>
                                            <tr class="active text-success">
                                                <th width="5%" align="center">操作</th>
                                                <th width="47.5%" align="center">setup_hooks</th>
                                                <th width="47.5%" align="center">teardown_hooks</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </form>
                                </div>

                                <div class="tab-pane fade" id="tab-bottom-left3" style="padding-left: 8px;">
                                    <br>   
                                     <div class="form-inline">
                                        <div class="form-group">
                                            <div class="input-group" >
                                                <div class="input-group-addon">URL</div>
                                                <input type="text" class="form-control" id="url" name="url" placeholder="api url">
                                            </div>
                                        </div>

                                        <div class="form-group ">
                                            <div class="input-group">
                                                <div class="input-group-addon">Method</div>
                                                <select class="form-control" name="method" id="method">
                                                    <option>POST</option>
                                                    <option>GET</option>
                                                    <option>PUT</option>
                                                    <option>DELETE</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group ">
                                            <div class="input-group">
                                                <div class="input-group-addon">Type</div>
                                                <select class="form-control" name="DataType" id="DataType">
                                                    <option>data</option>
                                                    <option>json</option>
                                                    <option>params</option>
                                                </select>
                                            </div>
                                        </div>

                                        <button class="btn btn-info" value="添 加" id="add_data" onclick="add_row('data')">+ data
                                        </button>
                                        <button class="btn btn-danger" value="删 除" id="del_data" onclick="del_row('data')">- data
                                        </button>
                                        <button class="btn btn-info" value="添 加" onclick="add_row('header')">+ headers</button>
                                        <button class="btn btn-danger" value="删 除" onclick="del_row('header')">- headers</button>

                                        <form id="form_request_data">
                                            <table class="table table-hover table-condensed table-bordered table-striped" id="data">
                                                <caption>data:</caption>
                                                <thead>
                                                <tr class="active text-success">
                                                    <th width="5%" align="center">操作</th>
                                                    <th width="30%" align="center">Key</th>
                                                    <th width="5%" align="center">Type</th>
                                                    <th width="60%" align="center">Value</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </form>

                                        <form id="form_request_header">
                                            <table class="table table-hover table-condensed table-bordered table-striped" id="header">
                                                <caption>headers:</caption>
                                                <thead>
                                                <tr class="active text-success">
                                                    <th width="5%" align="center">操作</th>
                                                    <th width="40%" align="center">Key</th>
                                                    <th width="55%" align="center">Value</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </form>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tab-bottom-left4" style="padding-left: 8px;">
                                    <br>   
                                    <button class="btn btn-info" value="添 加" onclick="add_row('extract')">+ extract
                                    </button>
                                    <button class="btn btn-danger" value="删 除" onclick="del_row('extract')">- extract
                                    </button>
                                    <button class="btn btn-info" value="添 加" onclick="add_row('validate')">+ validate</button>
                                    <button class="btn btn-danger" value="删 除" onclick="del_row('validate')">- validate</button>
                                    <form id="form_extract">
                                        <table class="table table-hover table-condensed table-bordered table-striped" id="extract">
                                            <caption>extract:</caption>
                                            <thead>
                                            <tr class="active text-success">
                                                <th width="5%" align="center">操作</th>
                                                <th width="30%" align="center">Key</th>
                                                <th width="55%" align="center">Value</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </form>

                                    <form id="form_validate">
                                        <table class="table table-hover table-condensed table-bordered table-striped" id="validate">
                                            <caption>validate:</caption>
                                            <thead>
                                            <tr class="active text-success">
                                                <th width="5%" align="center">操作</th>
                                                <th width="32%" align="center">Check</th>
                                                <th width="10%" align="center">Comparator</th>
                                                <th width="8%" align="center">Type</th>
                                                <th width="45%" align="center">Expected</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </form>
                                </div>
                            </form>
                        
                        </div>
                        <div class="am-form-group am-cf">
                            <div class="you" style="text-align:center;">
                            <button type="button" class="btn btn-success btn-sm" id="send">点 击 提 交</button>
                                            &nbsp; » &nbsp;
                            <a type="submit" href="" class="btn btn-info btn-sm" id="new_case">新 增 用 例</a>
                            </div>
                            </br></br></br>
                       </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{% static '/api/js/netutils.js' %}"></script>
<script src="{% static '/api/js/commons.js' %}"></script>
<script src="{% static '/api/js/config_new.js' %}"></script>
<!-- END MAIN CONTENT -->
{% endblock %}
